<template>
	<view class="container" v-if="!$u.test.isEmpty(dataInfo)">
		<navigator open-type="navigateBack" hover-class="none">
			<image class="back" :src="$setting.imageUrl()+'CircleRight.png'"></image>
		</navigator>
		
		<view class="map">
			<map :include-points="includePoints" :markers="markers"></map>
			<!-- <image class="map-image" :src="$setting.imageUrl()+'GPS.png'"></image> -->
		</view>
		
		<view class="con">
			<view class="delivery bg-fff">
				<view class="delivery-address flex">
					<view class="delivery-address-song flex-center">送</view>
					<view class="delivery-address-text">{{dataInfo.address.region.province}}{{dataInfo.address.region.city}}{{dataInfo.address.region.region}}{{dataInfo.address.detail}}{{dataInfo.address.house_number?dataInfo.address.house_number:''}}</view>
				</view>
				
				<view class="delivery-item flex-space-between" v-if="!$u.test.isEmpty(dataInfo.pay_time)">
					<view class="delivery-item-label">{{dataInfo.isyy==1?'预约':'预计送达'}}</view>
					<view class="delivery-item-value">
						<template v-if="dataInfo.isyy==1">{{dataInfo.yypstime | date("yy年m月d日 hh:MM")}}送达</template>
						<template v-else>{{handleFilterSendTime(sendTime, dataInfo.pay_time)}}({{sendTime}}分钟内送达)</template>
					</view>
				</view>
			<!-- 	<view class="delivery-item flex-space-between">
					<view class="delivery-item-label">距离收货点</view>
					<view class="delivery-item-value"></view>
				</view> -->
			</view>
			
			<view class="user bg-fff">
				<view class="user-title title-b flex-space-between">买家信息 <text class="user-name-txt" @click="handlePhone(dataInfo.user.mobile)">联系不到买家?微信联系</text></view>
				<view class="user-item flex-align-center">
					<image class="user-image" :src="$setting.imageUrl()+'UserCircle.png'"></image>
					<view class="user-name">{{dataInfo.address.name}}</view>
				</view>
				<view class="user-item flex-space-between">
					<view class="flex-align-center">
						<image class="user-image" :src="$setting.imageUrl() + 'Phone.png'"></image>
						<view class="user-name">{{ dataInfo.address.phone }}</view>
					</view>
					<b-u-button-theme width="160rpx" height="52rpx" size="28rpx"
						@click="handlePhone(dataInfo.address.phone)">联系买家</b-u-button-theme>
				</view>
			</view>

			<!-- 转单数据 is_transfer 1已转单  -->
			<view v-if="dataInfo.is_transfer == 1">
				<template v-if="dataInfo.store_clerk_id == userDelivery.clerk_id">
					<view class="user bg-fff"  v-if="dataInfo.transferUser && dataInfo.transferUser.mobile">
						<view class="user-title title-b">转单信息</view>
						<view class="user-item flex-space-between">
							<view class="user-t-l">转单时间：</view>
							<view class="user-name user-t-r">{{ dataInfo.transfer_ctime | date("yy-mm-dd hh:MM:ss") }}
							</view>
						</view>
						<view class="user-item flex-space-between" v-if="dataInfo.transfer_oktime">
							<view class="user-t-l">接单时间：</view>
							<view class="user-name user-t-r">{{ dataInfo.transfer_oktime | date("yy-mm-dd hh:MM:ss") }}
							</view>
						</view>
						<view class="user-item flex-space-between">
							<view class="user-t-l">接单状态：</view>
							<view class="user-name user-t-r">{{ dataInfo.is_clerk_shipping == 1 ? '已接单' : '未接单' }}</view>
						</view>
						<view class="user-item flex-align-center">
							<image class="user-image" :src="$setting.imageUrl() + 'UserCircle.png'"></image>
							<view class="user-name" v-if="dataInfo.transferUser">{{ dataInfo.transferUser.real_name }}
							</view>
						</view>
						<view class="user-item flex-space-between">
							<view class="flex-align-center">
								<image class="user-image" :src="$setting.imageUrl() + 'Phone.png'"></image>
								<view class="user-name" v-if="dataInfo.transferUser">{{ dataInfo.transferUser.mobile }}
								</view>
							</view>
							<b-u-button-theme width="160rpx" height="52rpx" size="28rpx"
								@click="handlePhone(dataInfo.transferUser.mobile)">联系对方</b-u-button-theme>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="user bg-fff"  v-if="dataInfo.deliveryUser && dataInfo.deliveryUser.mobile">
						<view class="user-title title-b">转单信息</view>
						<view class="user-item flex-space-between">
							<view class="user-t-l">转单时间：</view>
							<view class="user-name user-t-r">{{ dataInfo.transfer_ctime | date("yy-mm-dd hh:MM:ss") }}
							</view>
						</view>
						<view class="user-item flex-space-between">
							<view class="user-t-l">接单状态：</view>
							<view class="user-name user-t-r">{{ dataInfo.is_clerk_shipping == 1 ? '已接单' : '未接单' }}</view>
						</view>
						<view class="user-item flex-align-center">
							<image class="user-image" :src="$setting.imageUrl() + 'UserCircle.png'"></image>
							<view class="user-name" v-if="dataInfo.deliveryUser">{{ dataInfo.deliveryUser.real_name }}
							</view>
						</view>
						<view class="user-item flex-space-between">
							<view class="flex-align-center">
								<image class="user-image" :src="$setting.imageUrl() + 'Phone.png'"></image>
								<view class="user-name" v-if="dataInfo.deliveryUser">{{ dataInfo.deliveryUser.mobile }}
								</view>
							</view>
							<b-u-button-theme width="160rpx" height="52rpx" size="28rpx"
								@click="handlePhone(dataInfo.deliveryUser.mobile)">联系对方</b-u-button-theme>
						</view>
					</view>
				</template>
			</view>

			<!-- 特殊转单 -->
			<!-- <view class="user bg-fff" v-if="dataInfo.is_transfer == 1">
				<template v-if="dataInfo.shopper_id != userDelivery.clerk_id">
					<view class="user-title title-b">转单信息</view>
					<view class="user-item flex-space-between">
						<view class="user-t-l">转单时间：</view>
						<view class="user-name user-t-r">{{ dataInfo.single_time | date("yy-mm-dd hh:MM:ss") }}</view>
					</view>
					<view class="user-item flex-space-between">
						<view class="user-t-l">转单状态：</view>
						<view class="user-name user-t-r">{{ dataInfo.is_shipping == 0 ? '未接单' : '已接单' }}</view>
					</view>
					<view class="user-item flex-align-center">
						<image class="user-image" :src="$setting.imageUrl() + 'UserCircle.png'"></image>
						<view class="user-name" v-if="dataInfo.shopperUser">{{ dataInfo.shopperUser.username }}</view>
					</view>
					<view class="user-item flex-space-between">
						<view class="flex-align-center">
							<image class="user-image" :src="$setting.imageUrl() + 'Phone.png'"></image>
							<view class="user-name" v-if="dataInfo.shopperUser">{{ dataInfo.shopperUser.mobile }}</view>
						</view>
						<b-u-button-theme width="160rpx" height="52rpx" size="28rpx"
							@click="handlePhone(dataInfo.shopperUser.mobile)">联系对方</b-u-button-theme>
					</view>
				</template>
				<template v-else>
					<view class="user-title title-b">转单信息</view>
					<view class="user-item flex-space-between">
						<view class="user-t-l">转单时间：</view>
						<view class="user-name user-t-r">{{ dataInfo.single_time | date("yy-mm-dd hh:MM:ss") }}</view>
					</view>
					<view class="user-item flex-space-between">
						<view class="user-t-l">转单状态：</view>
						<view class="user-name user-t-r">{{ dataInfo.is_shipping == 0 ? '未接单' : '已接单' }}</view>
					</view>
					<view class="user-item flex-align-center">
						<image class="user-image" :src="$setting.imageUrl() + 'UserCircle.png'"></image>
						<view class="user-name" v-if="dataInfo.deliveryUser">{{ dataInfo.deliveryUser.real_name }}</view>
					</view>
					<view class="user-item flex-space-between">
						<view class="flex-align-center">
							<image class="user-image" :src="$setting.imageUrl() + 'Phone.png'"></image>
							<view class="user-name" v-if="dataInfo.deliveryUser">{{ dataInfo.deliveryUser.mobile }}</view>
						</view>
						<b-u-button-theme width="160rpx" height="52rpx" size="28rpx"
							@click="handlePhone(dataInfo.deliveryUser.mobile)">联系对方</b-u-button-theme>
					</view>
				</template>
			</view> -->

			<view class="info bg-fff">
				<view class="info-title">商品信息</view>

				<view class="product-item flex" v-for="(it, idx) in dataInfo.product" :key="idx">
					<image class="product-item-image" :src="it.image.file_path"></image>
					<view class="product-item-con">
						<view class="product-item-name">{{ it.product_name }}</view>
						<view class="product-item-suk">{{ it.product_attr }}</view>
						<view class="flex-space-between">
							<view class="product-item-price">￥{{ it.product_price }}</view>
							<view class="product-item-num">x{{ it.total_num }}</view>
						</view>
					</view>
				</view>
				<view class="product-item flex product-item-gift" v-if="dataInfo.gift_product_order">
					<image style="width: 100rpx;height: 100rpx;" :src="dataInfo.gift_product_order.file.file_path"></image>
					<view class="product-item-con">
						<view class="product-item-name u-line-1">{{dataInfo.gift_product_order.gift_product.product_name}}</view>
						<view class="product-item-suk"></view>
						<view class="flex-space-between">
							<view class="product-item-num">x{{dataInfo.gift_product_order.order_total_num}}</view>
							<view class="product-item-price">赠品</view>
						</view>
					</view>
				</view>

				<view class="flex-space-between product-total">
					<view>优惠：<text>￥{{ dataInfo.coupon_money_sys }}</text></view>
					<view>总价：<text>￥{{ dataInfo.total_price }}</text></view>
					<view>实付：<text>￥{{ dataInfo.pay_price }}</text></view>
				</view>

				<u-line color="rgba(225, 225, 225, 0.7)" />

				<view class="info-item flex-space-between">
					<view class="info-item-label">订单号码</view>
					<view class="info-item-value flex-align-center" @click="handleCopy(dataInfo.order_no)">
						<text>{{ dataInfo.order_no }}</text>
						<view>
							<u-icon name="file-text" size="28rpx" color="#333333"></u-icon>
						</view>
					</view>
				</view>
				<view class="info-item flex-space-between">
					<view class="info-item-label">备注</view>
					<view class="info-item-value">{{ dataInfo.buyer_remark }}</view>
				</view>
				<!-- <view class="info-item flex-space-between">
					<view class="info-item-label">发票信息</view>
					<view class="info-item-value"></view>
				</view> -->
				<view class="info-item flex-space-between"
					v-if="dataInfo.productClaim && dataInfo.productClaim.create_time">
					<view class="info-item-label">取货时间</view>
					<view class="info-item-value">{{ dataInfo.productClaim.create_time }}</view>
				</view>
				<view class="info-item flex-space-between"
					v-if="dataInfo.pay_status.value == 20 && dataInfo.delivery_status.value == 20 && dataInfo.receipt_status.value == 10 && (dataInfo.order_status.value == 10 || dataInfo.order_status.value == 30)">
					<view class="info-item-label">配送时间</view>
					<view class="info-item-value" v-if="!$u.test.isEmpty(dataInfo.pay_time) && dataInfo.isyy == 0">尽快送达
						[{{ dataInfo.pay_time | date("hh:MM") }}-{{ $filter.sendTime(sendTime, dataInfo.pay_time) }}]
					</view>
					<view class="info-item-value" v-if="!$u.test.isEmpty(dataInfo.pay_time) && dataInfo.isyy == 1">预约送达
						[{{ dataInfo.yypstime | date("yy年m月d日 hh:MM") }}]</view>
				</view>
				<view class="info-item flex-space-between"
					v-if="dataInfo.pay_status.value == 20 && dataInfo.delivery_status.value == 20 && dataInfo.receipt_status.value == 10 && (dataInfo.order_status.value == 10 || dataInfo.order_status.value == 30)">
					<view class="info-item-label">配送骑士</view>
					<view class="info-item-value" v-if="!$u.test.isEmpty(dataInfo.deliveryUser)">
						{{ dataInfo.deliveryUser.real_name }}
						{{ dataInfo.deliveryUser.mobile }}</view>
				</view>
				<!-- <view class="info-item flex-space-between">
					<view class="info-item-label">支付方式</view>
					<view class="info-item-value">{{dataInfo.pay_type.text}}</view>
				</view> -->
				<view class="info-item flex-space-between">
					<view class="info-item-label">下单时间</view>
					<view class="info-item-value">{{ dataInfo.create_time }}</view>
				</view>
				<view class="info-item flex-space-between" v-if="dataInfo.pay_time">
					<view class="info-item-label">付款时间</view>
					<view class="info-item-value">{{ dataInfo.pay_time | date("yy-mm-dd hh:MM:ss") }}</view>
				</view>
				<view class="info-item flex-space-between"
					v-if="dataInfo.pay_status.value == 20 && dataInfo.order_status.value == 30">
					<view class="info-item-label">送达时间</view>
					<view class="info-item-value" v-if="!$u.test.isEmpty(dataInfo.receipt_time)">
						{{ dataInfo.receipt_time }}</view>
				</view>
				<view v-if="dataInfo.productClaim" v-for="item in dataInfo.productClaim">
					<view class="info-item flex-space-between">
						<view class="info-item-label">
							<view>{{ item.ctype == 0 ? "取货图片" : "转单图片" }}</view>
							<view>{{ item.create_time }}</view>
						</view>
						<image v-for="ele in item.image_list" @click="imgPreview(ele)" :src="ele" mode="heightFix"
							style="height: 150rpx;"></image>
					</view>
				</view>
				<view class="info-item flex-space-between" v-if="dataInfo.delivery_image && dataInfo.delivery_image.length>0">
					<view class="info-item-label">
						<view>{{ dataInfo.delivery_type.value==20?'自提图片':'送达图片' }}</view>
						<view>{{ dataInfo.receipt_time }}</view>
					</view>
					<image v-for="itemImg in dataInfo.delivery_image" @click="imgPreview(itemImg)" :src="itemImg" mode="heightFix"
						style="height: 150rpx;"></image>
				</view>
			</view>
			<view v-if="tabsCurrent==1 || (tabsCurrent==2&&dataInfo.address_remarks)" class="info bg-fff" style="margin-top: -30rpx;">
				<view class="remarks">骑士备注信息
					<b-u-button-theme v-if="!dataInfo.address_remarks && tabsCurrent !=2" width="160rpx" height="52rpx" size="28rpx"
							@click="knightDescription = true">添加备注</b-u-button-theme>
					<b-u-button-theme v-if="dataInfo.address_remarks && tabsCurrent !=2" width="160rpx" height="52rpx" size="28rpx"
							@click="knightDescription = true">修改</b-u-button-theme>
				</view>
				<view v-if="dataInfo.address_remarks" style="margin: 20rpx 0;">{{ dataInfo.address_remarks }}</view>
			</view>

				<view class="delivery-item-operate" v-if='tabsNum!=3 && token_type==1'>
					<view class="delivery-item-remark"></view>
					<view class="flex-align-center">
						<b-u-button-theme width="190rpx" height="60rpx" size="26rpx" @click="handleReceiving(dataInfo)"
							v-if="(tabsNum == 0 || tabsNum == 1) && (dataInfo.order_source != 30 || (dataInfo.order_source == 30 && dataInfo.assemble_status == 20))">立即接单</b-u-button-theme>
						<b-u-button-grey width="190rpx" height="60rpx" size="26rpx"
							v-if="(tabsNum == 0 || tabsNum == 1) && dataInfo.order_source == 30 && dataInfo.assemble_status != 20">立即接单</b-u-button-grey>

						<template v-if="tabsNum == 2">
							<!-- 未转单 -->
							<view class="flex" v-if="dataInfo.is_transfer == 0">
								<b-u-button-theme width="190rpx" height="60rpx" size="26rpx"
									@click="userSelfFun(dataInfo.order_id)"
									v-if="dataInfo.is_claim == 0">用户自提</b-u-button-theme>
								<b-u-button-theme width="190rpx" height="60rpx" size="26rpx"
									@click="servicePop(dataInfo.order_id, dataInfo.is_claim)"
									v-if="dataInfo.is_transfer == 0">转单</b-u-button-theme>

								<!-- <template v-if="item.is_transfer == 0"> -->
								<b-u-button-theme width="190rpx" height="60rpx" size="26rpx"
									@click="jump('/pages/mine/delivery/pick_delivery?order_id=' + dataInfo.order_id)"
									v-if="dataInfo.is_claim == 0">待取货</b-u-button-theme>
								<b-u-button-theme width="190rpx" height="60rpx" size="26rpx"
									@click="jump('/pages/mine/delivery/finish?order_id=' + dataInfo.order_id)"
									v-if="dataInfo.is_claim != 0" style="margin-left: 20rpx;">待送达</b-u-button-theme>

								<!-- </template> -->
							</view>
							<!-- 已转单 -->
							<view v-if="dataInfo.is_transfer == 1">
								<template v-if="dataInfo.store_clerk_id == userDelivery.clerk_id">
									<view class="flex" v-if="dataInfo.is_clerk_shipping != 1">
										<b-u-button-theme width="190rpx" height="60rpx" size="26rpx"
											style="margin-right: 20rpx;"
											@click="cancelTransfer(dataInfo.order_id, 0,1)">拒绝转单</b-u-button-theme>
										<b-u-button-theme width="190rpx" height="60rpx" size="26rpx"
											style="margin-right: 20rpx;"
											@click="completeTransfer(dataInfo.order_id, 0)">立即接单</b-u-button-theme>
									</view>
								</template>

								<template v-else-if="dataInfo.transfer_ckid == userDelivery.clerk_id">
									<!-- 已接单 -->
									<view class="flex">
										<view v-if="dataInfo.is_clerk_shipping != 1">
											<b-u-button-theme width="190rpx" height="60rpx" size="26rpx"
												style="margin-right: 20rpx;"
												@click="cancelTransfer(dataInfo.order_id, 0,0)">取消转单</b-u-button-theme>
										</view>
											<view class="transferred_order">已转单</view>
											<view class="transferred_time">{{ dataInfo.transfer_ctime | date("dd日 hh:MM:ss") }}
									</view>
									</view>
								</template>
								<template v-else>
									<!-- 已接单 -->
									<view class="flex">
											<view class="transferred_order">已转单</view>
											<view class="transferred_time">{{ dataInfo.transfer_ctime | date("dd日 hh:MM:ss") }}
									</view>
									</view>
								</template>
							</view>
							<!-- 二次转单 -->
							<template v-if="dataInfo.is_clerk_shipping == 1">
								<template v-if="dataInfo.store_clerk_id == userDelivery.clerk_id">
									<view class="flex" v-if="dataInfo.is_transfer != 0">
										<b-u-button-theme width="190rpx" height="60rpx" size="26rpx"
											@click="servicePop(dataInfo.order_id, dataInfo.is_claim)"
											>转单</b-u-button-theme>
										<b-u-button-theme width="190rpx" height="60rpx" size="26rpx"
											@click="jump('/pages/mine/delivery/pick_delivery?order_id=' + dataInfo.order_id)"
											v-if="dataInfo.is_clerk_claim == 0">待取货</b-u-button-theme>
										<b-u-button-theme width="190rpx" height="60rpx" size="26rpx"
											@click="jump('/pages/mine/delivery/finish?order_id=' + dataInfo.order_id)"
											v-if="dataInfo.is_clerk_claim != 0"
											style="margin-left: 20rpx;">待送达</b-u-button-theme>
									</view>
								</template>
							</template>
						</template>
					</view>
				</view>


				<view class="delivery-item-operate" v-if='tabsNum!=3 && token_type==0'>
					<view class="delivery-item-remark"></view>
					<view class="flex-align-center">
												<!-- 接单（订单所属人） -->
						<template v-if="dataInfo.store_clerk_id == userDelivery.clerk_id">
							<!-- 接单未取货 -->
							<view v-if="dataInfo.is_clerk_shipping == 1 && dataInfo.is_clerk_claim == 0" class="flex-align-center">
								
								<!-- 只有酒秒达转社区骑手才能原路返回 -->
								<b-u-button-theme width="190rpx" height="56rpx" size="26rpx"
									@click="originalRoute(dataInfo.order_id)" 
									v-if="tabsNum == 1 && dataInfo.is_first==2">原路退回</b-u-button-theme>

								<b-u-button-theme width="190rpx" height="56rpx" size="26rpx"
									@click="servicePop(dataInfo.order_id, dataInfo.is_clerk_claim)" 
									v-if="tabsNum == 1">转单</b-u-button-theme>

								<b-u-button-theme width="190rpx" height="56rpx" size="26rpx"
									@click="jump('/pages/mine/delivery/pick_delivery?order_id=' + dataInfo.order_id)"
									v-if="tabsNum == 1 && dataInfo.is_clerk_claim == 0">待取货</b-u-button-theme>
							</view>

							<!-- 未接单未取货 -->
							<view v-else-if="dataInfo.is_clerk_shipping == 0 && dataInfo.is_clerk_claim == 0" class="flex-align-center">
								<b-u-button-theme v-if="tabsNum == 1" width="190rpx" height="56rpx" size="26rpx"
									
									@click="cancelTransfer(dataInfo.order_id, 1,1)">拒绝转单</b-u-button-theme>
								<b-u-button-theme width="190rpx" height="56rpx" size="26rpx"
									 @click="handleReceiving(dataInfo)"
									v-if="tabsNum == 1">立即接单</b-u-button-theme>
							</view>

							<!-- 已接单已取货 -->
							<view v-else-if="dataInfo.is_clerk_shipping == 1 && dataInfo.is_clerk_claim == 1" class="flex-align-center">
								<b-u-button-theme width="190rpx" height="56rpx" size="26rpx"
									@click="servicePop(dataInfo.order_id, dataInfo.is_clerk_claim)" 
									v-if="tabsNum == 1">转单</b-u-button-theme>

								<b-u-button-theme width="190rpx" height="56rpx" size="26rpx"
									@click="jump('/pages/mine/delivery/finish?order_id=' + dataInfo.order_id)"
									v-if="tabsNum == 1 && dataInfo.is_clerk_claim == 1"
									style="margin-left: 30rpx;">待送达</b-u-button-theme>
							</view>
					
							<view v-if="tabsNum == 0" class="flex-align-center">
								<b-u-button-theme  width="190rpx" height="56rpx" size="26rpx"
									
									@click="cancelTransfer(dataInfo.order_id, 1,1)">拒绝转单</b-u-button-theme>
								<b-u-button-theme width="190rpx" height="56rpx" size="26rpx"
									 @click="handleReceiving(dataInfo)"
									v-if="tabsNum == 0 && (dataInfo.order_source != 30 || (dataInfo.order_source == 30 && dataInfo.assemble_status == 20))">立即接单</b-u-button-theme>
								<view class="transferred_time">{{ dataInfo.single_time | date("dd日 hh:MM:ss") }}</view>
							</view>
						</template>
						<template v-else>
							<!-- 已接单 -->
							<view v-if="dataInfo.store_clerk_id != userDelivery.clerk_id">
								<view class="flex" v-if="tabsNum == 1">
									<view v-if="dataInfo.is_clerk_shipping != 1">
										<b-u-button-theme width="190rpx" height="56rpx" size="26rpx"
											style="margin-right: 20rpx;"
											@click="cancelTransfer(dataInfo.order_id, 0)">取消转单</b-u-button-theme>
									</view>
									<view class="transferred_order">已转单</view>
									<view class="transferred_time">{{ dataInfo.transfer_ctime | date("dd日 hh:MM:ss") }}
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>


			<safe-area-inset-bottom></safe-area-inset-bottom>

			<view class="strategy_pop" v-if="knightDescription === true">
			<view class="image bg-fff">
				<view class="image-title">{{ dataInfo.address_remarks?'修改备注':'添加备注' }}</view>
				<input class="image-inp" type="text" v-model="inputVal" placeholder="请输入备注"/>
				<view class="pop_box">
					<view class="button_pop" @click="postAddRemarks()" style="background-color: #BB0024;color: #fff;">
						确认提交
					</view>
					<view class="button_pop" @click="knightDescription = false">取消</view>
				</view>
			</view>
		</view>
		</view>
		<view class="strategy_pop" v-if="guide === true">
			<view class="image bg-fff">
				<view class="image-title">拍照验证</view>
				<view class="image-tips">为了避免货物纠纷，请在转单时进行检查并拍照存证</view>
				<u-upload width="150rpx" height="150rpx" :header="{ 'Cookie': 'XDEBUG_TRIGGER=;' }" :form-data="{
				token: token,
				app_id: app_id,
			}" name="iFile" :action="$setting.baseUrl() + '/file.upload/image'"
					@on-choose-complete="handleUploadChooseComplete()" @on-uploaded="handleUploaded()"
					@on-success="handleUploadSuccess" @on-remove="handleUploadRemove"></u-upload>

				<view class="pop_box">
					<view class="button_pop" @click="postClaimProduct" style="background-color: #BB0024;color: #fff;">
						确认提交
					</view>
					<view class="button_pop" @click="guide = false">取消</view>
				</view>
			</view>
		</view>
		<view class="strategy_pop" v-if="userSelf === true">
			<view class="image bg-fff">
				<view class="image-title">拍照验证</view>
				<view class="image-tips">为了避免货物纠纷，请在用户自提时进行检查并拍照存证</view>
				<u-upload width="150rpx" height="150rpx" :header="{ 'Cookie': 'XDEBUG_TRIGGER=;' }" :form-data="{
				token: token,
				app_id: app_id,
			}" name="iFile" :action="$setting.baseUrl() + '/file.upload/image'"
					@on-choose-complete="handleUploadChooseComplete()" @on-uploaded="handleUploaded()"
					@on-success="handleUploadSuccess" @on-remove="handleUploadRemove"></u-upload>

				<view class="pop_box">
					<view class="button_pop" @click="posuserPickupFun" style="background-color: #BB0024;color: #fff;">
						确认提交
					</view>
					<view class="button_pop" @click="userSelf = false">取消</view>
				</view>
			</view>
		</view>
		<u-popup v-model="serviceShow" mode="bottom" border-radius="24" closeable close-icon="close-circle"
			z-index="9999" close-icon-size="40">
			<view class="popup-service">
				<view class="popup-service-title">选择跑腿人员</view>
				<u-tabs :list="poptabsList" :active-color="$setting.colorTheme()" :is-scroll="false"
					:current="poptabsCurrent" @change="poptabsChange" :show-bar="false"></u-tabs>
				<view class="popup-search-title">
					<u-search :placeholder="placeholder" v-model="popkeyword" @search="onSearch"
						@custom="onSearch"></u-search>
				</view>
				<view class="popup-service-list">
					<scroll-view scroll-y="true" class="scroll-Y" style="height: 56vh">
						<view class="popup-service-item" v-for="(item, index) in service" :key="index">
							<template v-if="poptabsCurrent == 2">
								<view>
									<view class="flex">
										<view class="popup-service-name">
											<text style="color: #bb0024;margin-right: 20rpx;font-size: 36rpx;">{{ item.username }}</text>
											<text class="flex-cc-t" style="font-size: 26rpx;">{{item.mobile }}</text></view>
									</view>
									<view class="popup-service-name"><text class="flex-cc-b" style="font-size: 24rpx;margin-top: 6rpx;">所属小区：{{item.name }}</text></view>
								</view>
				
								<view v-if="item.is_rest == 1" class="popup-service-describe"
									@click="guidefun(item.id)">转单</view>
								<view v-else class="popup-service-describe popup-service-rest">休息中</view>
							</template>
							<template v-else>
								<view class="flex">
									<view class="popup-service-name flex-cc">
										<text class="flex-cc-t" style="font-size: 26rpx;"><text style="color: #bb0024;margin-right: 20rpx;font-size: 36rpx;">{{ item.real_name }}</text>{{ item.mobile }}</text>
										<text class="flex-cc-b" style="font-size: 24rpx;">所属前置仓：{{ item.store_name }}</text>
									</view>
									<!-- <view class="popup-service-name flex-cc" v-else>
										<text class="flex-cc-t">{{ item.real_name }}</text>
										<text class="flex-cc-b">{{ item.mobile }}</text>
									</view> -->
								</view>
								<view v-if="item.is_rest == 1" class="popup-service-describe"
									@click="guidefun(item.clerk_id)">转单</view>
								<view v-else class="popup-service-describe popup-service-rest">休息中</view>
							</template>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			is_notice: true,
			token: uni.getStorageSync('token'),
			app_id: uni.$setting.appId,
			dataInfo: {},
			sendTime: 0,
			includePoints: [],
			includePointsOld: [],
			markers: [],
			markersOld: [],
			token_type: 1,
			longitude: '',
			latitude: '',
			userDelivery: {},
			guide: false,
			inputVal:"",
			tabsCurrent:0,
			tabsNum:0,
			poptabsList: [
				{
					name: "店内转",
					id: "1",
				},
				{
					name: "跨店转",
					id: "2",
				},
				{
					name: "社区骑手",
					id: "3",
				},
			],
			picksupList: [
				{
					name: "店内转",
					id: "1",
				},
				{
					name: "跨店转",
					id: "2",
				},
			],
			serviceList: [
				{
					name: "店内转",
					id: "1",
				},
				{
					name: "跨店转",
					id: "2",
				},
				{
					name: "社区骑手",
					id: "3",
				},
			],
			poptabsCurrent: 0,
			popkeyword: "",
			form: {
				image: [],
			},
			shopper_id: null,
			pickup: 0,//待取货  已取货
			userSelf:false,//用户自提
			userSelfId:'',
			serviceShow: false,
			service: [],
			serviceId: '',//订单id
			knightDescription:false
		}
	},
	onLoad(options) {
		this.order_id = options.order_id;
		this.tabsCurrent = options.tabsCurrent
		this.tabsNum = options.tabsCurrent
		this.token_type = uni.getStorageSync('token_type')
		console.log(uni.getStorageSync('token_type'),"================12");
		if(this.token_type == 1 && this.tabsCurrent>0) {
			this.tabsCurrent--
		}
		// if(this.token_type == 0 && this.tabsCurrent>0) {
		// 	this.tabsNum++
		// }
		if(this.token_type == 0){
			this.poptabsCurrent = 2
		}
	},
	onShow() {
		this.getHttp();
	},
	onUnload() {
		uni.stopLocationUpdate();
	},
	computed: {
		placeholder() {
			if (this.poptabsCurrent == 0) {
				return "姓名|手机号搜索"
			} else if(this.poptabsCurrent == 1){
				return "姓名|手机号|门店搜索"
			}else {
				return "小区名称搜索"
			}
		}
	},
	methods: {
		originalRoute(id) {
			let params = {
				order_id: id,
				shopper_id: this.userDelivery,
				stype: 3,
				image: ''
			}
			uni.$u.api.transferOrder(params).then(res => {
				uni.showToast({
					title: "原路退回成功",
				})
				setTimeout(() => {
					uni.navigateBack();
                 }, 500)
			})
		},
		getVillageList() {
			let params = {
				poptype: this.poptabsCurrent,
				popsearch: this.popkeyword,
			}
			if(this.token_type == 0){
				params.transfer_type = 2
			}
			uni.$u.api.getVillageList(params).then(res => {
				this.service = res.list
			})
		},
		poptabsChange(e) {
			this.popkeyword = ""
			this.poptabsCurrent = e;
			this.service = [];
			this.getVillageList();
		},
		onSearch(e) {
			this.popkeyword = e
			this.service = [];
			this.getVillageList();
		},
		guidefun(id) {
			this.form.image = []
			this.shopper_id = id
			if (this.pickup == 0) {
				let params = {
					order_id: this.serviceId,
					shopper_id: this.shopper_id,
					stype: this.poptabsCurrent,
					image: this.form.image
				}
				uni.$u.api.transferOrder(params).then(res => {
					uni.showToast({
						title: "转单成功",
					})
					this.serviceShow = false
					this.guide = false
					this.getDeliveryDetail();
				})
			} else {
				this.guide = true
			}
		},
		postClaimProduct() {
			if (!this.form.image || this.form.image.length == 0) {
				uni.showToast({
					title: "请拍照确认",
					icon: 'none'
				})
				return;
			}
			// let formImg = JSON.parse(JSON.stringify(this.form));
			let params = {
				order_id: this.serviceId,
				shopper_id: this.shopper_id,
				stype: this.poptabsCurrent,
				image: this.form.image
			}
			uni.$u.api.transferOrder(params).then(res => {
				uni.showToast({
					title: "转单成功",
				})
				this.serviceShow = false
				this.guide = false
				this.getDeliveryDetail();
			})
		},
		handleUploadSuccess(e) {
			this.form.image.push(e.data.file_path);
		},
		handleUploadRemove(index) {
			this.form.image.splice(index, 1);
		},
		servicePop(id, is_claim) {
			if (is_claim == 0) {
				this.poptabsList = this.picksupList
			} else {
				this.poptabsList = this.serviceList
			}
			this.pickup = is_claim
			this.serviceId = id
			if(this.token_type==0){
				this.poptabsCurrent = 2
				this.poptabsList  = [
				{
					name: "社区骑手",
					id: "3",
				},
			]
			}
			setTimeout(() => {
				this.serviceShow = true
			}, 200)
		},
		cancelTransfer(orderid, type,ele) {
			let self = this;
			uni.showModal({
				title: '提示',
				content: '确定要取消转单吗？',
				success: function (res) {
					if (res.confirm) {
						uni.$u.api.cltransferOrder({
							order_id: orderid,
							stype: type
						}).then(res => {
							uni.showToast({
								title: "取消成功",
							})
							if(ele==0){
								self.getDeliveryDetail();
							}else{
								setTimeout(() => {
									uni.navigateBack();
								}, 500)
							}
						})
					} else if (res.cancel) {
						// that.showerrormsg();
						console.log('用户点击取消');
					}
				}
			});
		},
		completeTransfer(orderid, type) {
			uni.$u.api.postShopperReceiving({ order_id: orderid }).then(res => {
				uni.showToast({
					title: "接单成功",
				})

				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						uni.$u.api.postAsyncSaveCoord({
							order_id: item.order_id,
							async_lng: res.longitude,
							async_lat: res.latitude,
						})
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
					},
				});
				this.getDeliveryDetail();
			})
		},
		userSelfFun(id){
			this.form.image = []
			this.userSelfId = id
			this.userSelf = true
		},
		posuserPickupFun(){
			if (!this.form.image || this.form.image.length == 0) {
				uni.showToast({
					title: "请拍照确认",
					icon: 'none'
				})
				return;
			}
			let params = {
				order_id: this.userSelfId,
				delivery_image: this.form.image
			}
			uni.$u.api.posuserPickup(params).then(res => {
				uni.showToast({
					title: "自提成功",
				})
				this.tabsCurrent = 3
				this.userSelf = false
				this.getDeliveryDetail();
			})
		},
		postAddRemarks() {
			if(uni.$u.test.isEmpty(this.inputVal)) {
					uni.showToast({
						title: "内容不能为空",
						icon: "none"
					})
					return
				}
			uni.$u.api.postAddRemarks({ order_id: this.dataInfo.order_id,address_remarks:this.inputVal }).then(res => {
				uni.showToast({
					title: this.dataInfo.address_remarks?'修改备注成功':'添加备注成功',
				})
				this.knightDescription = false
				this.getDeliveryDetail();
			})
		},
		openLocation(name) {
			let latitude = Number(this.latitude);
			let longitude = Number(this.longitude);
			this.gomapApp(latitude, longitude, name)
		},
		// 打开的点击事件，传经纬度和地点名
		gomapApp(latitude, longitude, name) {
			let url = "";
			if (plus.os.name == "Android") { //判断是安卓端
				plus.nativeUI.actionSheet({ //选择菜单
					title: "选择地图应用",
					cancel: "取消",
					buttons: [{
						title: "百度地图"
					}, {
						title: "高德地图"
					}]
				}, function (e) {
					switch (e.index) {
						//下面是拼接url,不同系统以及不同地图都有不同的拼接字段

						case 1:
							url =
								`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
							break;
						case 2:
							url =
								`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
							break;
						default:
							break;
					}
					if (url != "") {
						url = encodeURI(url);
						//plus.runtime.openURL(url,function(e){})调起手机APP应用
						plus.runtime.openURL(url, function (e) {
							plus.nativeUI.alert("本机未安装指定的地图应用");
						});
					}
				})
			} else {
				// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
				// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
				//（如urlschemewhitelist:["iosamap","baidumap"]）
				plus.nativeUI.actionSheet({
					title: "选择地图应用",
					cancel: "取消",
					buttons: [{
						title: "百度地图"
					}, {
						title: "高德地图"
					}]
				}, function (e) {
					switch (e.index) {
						case 1:
							url =
								`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
							break;
						case 2:
							url =
								`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
							break;
						default:
							break;
					}
					if (url != "") {
						url = encodeURI(url);
						plus.runtime.openURL(url, function (e) {
							plus.nativeUI.alert("本机未安装指定的地图应用");
						});
					}
				})
			}
		},
		imgPreview(img) {
			let urls_img = [img]
			uni.previewImage({
				urls: urls_img,
				current: 0,
			});
		},
		handleCopy(text) {
			uni.setClipboardData({
				data: text.toString(),
			});
		},
		jump(url) {
			uni.navigateTo({
				url: url
			})
		},
		handleReceiving(item) {
			if (this.dataInfo.delivery_status.value != 10) {
				//首次转单
				uni.$u.api.postShopperReceiving({ order_id: this.dataInfo.order_id }).then(res => {
					uni.showToast({
						title: "接单成功",
					})
					this.tabsNum = this.token_type==1? 2 : 1
					this.getDeliveryDetail();
				})
			} else {
				uni.$u.api.postReceiving({ order_id: this.dataInfo.order_id }).then(res => {
					uni.showToast({
						title: "接单成功",
					})
					this.tabsNum = this.token_type==1? 2 : 1
					this.getDeliveryDetail();
				})
			}

		},
		handleFilterSendTime(sendTime, time) {
			let sendTime_a = Number(sendTime) * 60 * 1000; // 配送时间(分) 时间戳

			let timeDate = time * 1000;

			let sendTimeDate = new Date(Number(sendTime_a) + Number(timeDate));

			var year = sendTimeDate.getFullYear(); //得到年份
			var month = sendTimeDate.getMonth() + 1;//得到月份
			var date = sendTimeDate.getDate();//得到日期
			var day = sendTimeDate.getDay();//得到周几
			var hour = sendTimeDate.getHours();//得到小时
			var minu = sendTimeDate.getMinutes();//得到分钟
			var sec = sendTimeDate.getSeconds();//得到秒

			if (month < 10) { month = "0" + month };
			if (date < 10) { date = "0" + date };

			if (hour < 10) { hour = "0" + hour; }
			if (minu < 10) { minu = "0" + minu; }
			if (sec < 10) { sec = "0" + sec; }

			return year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
		},
		handlePhone(value) {
			let phone = value.toString()
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		startLocation() {
			uni.startLocationUpdate({
				type: 'gcj02',
				success: () => {
					uni.onLocationChange((res) => {
						// console.log(res);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						//  this.longitude = res.longitude;
						//  this.latitude = res.latitude;

						if (this.includePoints.length > 1) {
							this.includePointsOld[1] = {
								longitude: Number(res.longitude),
								latitude: Number(res.latitude)
							};
							this.markersOld[1] = {
								id: 2,
								iconPath: this.$setting.imageUrl() + 'qishou.png',
								width: 50,
								height: 50,
								longitude: Number(res.longitude),
								latitude: Number(res.latitude)
							};
						} else {
							this.includePointsOld.push({
								longitude: Number(res.longitude),
								latitude: Number(res.latitude)
							});
							this.markersOld.push({
								id: 2,
								iconPath: this.$setting.imageUrl() + 'qishou.png',
								width: 50,
								height: 50,
								longitude: Number(res.longitude),
								latitude: Number(res.latitude)
							});
						}

						this.markers = [];
						this.includePoints = [];
						setTimeout(() => {
							this.markers = this.markersOld;
							this.includePoints = this.includePointsOld;

						}, 50)
						uni.$u.http.setConfig({ showLoading: false });
						uni.$u.api.postAsyncSaveCoord({
							order_id: this.order_id,
							async_lng: res.longitude,
							async_lat: res.latitude,
						}).then(res => {
							uni.$u.http.setConfig({ showLoading: true });
						}).catch(err => {
							uni.$u.http.setConfig({ showLoading: true });
						})
					});
				},
				fail: (err) => {
					// console.log(err);
				},
			})
		},
		getUserDelivery() {
			uni.$u.api.getUserDelivery().then(res => {
				this.userDelivery = res;
			})
		},
		getDeliveryDetail() {
			uni.$u.api.getDeliveryDetail({
				order_id: this.order_id,
				pay_source: 'wx',
			}).then(res => {
				this.dataInfo = res.order;
				console.log();
				if(this.dataInfo.order_status.value == 30){
					this.tabsNum = 3
				}
				this.$nextTick(() => {
					this.longitude = Number(this.dataInfo.address.longitude),
						this.latitude = Number(this.dataInfo.address.latitude)

					this.includePointsOld = [{
						longitude: Number(this.dataInfo.address.longitude),
						latitude: Number(this.dataInfo.address.latitude)
					}];

					this.markersOld = [
						{
							id: 1,
							iconPath: this.$setting.imageUrl() + 'kehu.png',
							width: 50,
							height: 50,
							longitude: Number(this.dataInfo.address.longitude),
							latitude: Number(this.dataInfo.address.latitude),
						},
					];
					this.includePoints = this.includePointsOld;
					this.markers = this.markersOld;

					if (this.dataInfo.pay_status.value == 20 && this.dataInfo.delivery_status.value == 20 && this.dataInfo.receipt_status.value == 10 && this.dataInfo.order_status.value == 10) {
						this.startLocation();
					}
				})
			})
		},
		getConfigData() {
			uni.$u.api.getConfigData({ type: "sendTime" }).then(res => {
				this.sendTime = res.list[0].value;
			})
		},
		getHttp() {
			this.getUserDelivery()
			this.getConfigData();
			this.getVillageList();
			this.getDeliveryDetail();
		},
	},
}
</script>

<style lang="scss" scoped>
.container {

	.back {
		position: fixed;
		left: 28rpx;
		top: 108rpx;
		z-index: 99;
		width: 48rpx;
		height: 48rpx;
		transform: rotate(180deg);
	}

	.map {
		position: relative;

		map {
			width: 100%;
			height: 400rpx;
		}

		.map-image {
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			bottom: 50rpx;
			right: 50rpx;
			z-index: 999;
		}
	}

	.con {
		padding: 0 30rpx 20rpx 30rpx;

		.delivery {
			margin-top: 20rpx;
			padding: 20rpx 34rpx;
			border-radius: 16rpx;

			.delivery-address {

				.delivery-address-song {
					width: 56rpx;
					height: 56rpx;
					border-radius: 160rpx;
					background: #F6F6F6;
					font-size: 28rpx;
					color: #BB0024;
				}

				.delivery-address-text {
					padding-top: 10rpx;
					font-size: 32rpx;
					color: #111111;
					font-weight: bold;
					margin-left: 20rpx;
				}
			}

			.delivery-item {
				margin-top: 36rpx;

				.delivery-item-label {
					font-size: 26rpx;
					color: #666666;
				}

				.delivery-item-value {
					font-size: 26rpx;
					color: #111111;
				}
			}
		}

		.user {
			margin-top: 24rpx;
			padding: 20rpx 34rpx;
			border-radius: 16rpx;

			.user-title {
				font-size: 28rpx;
				color: #111111;

				&.title-b {
					font-weight: bold;
				}
			}

			.user-item {
				margin-top: 20rpx;
			}

			.user-image {
				width: 48rpx;
				height: 48rpx;
			}

			.user-name {
				font-size: 28rpx;
				color: #111111;
				margin-left: 20rpx;
			}
			.user-name-txt {
				font-size: 24rpx;
				color: #ff6565;
				text-decoration: underline;
			}
			.user-t-r {
				color: #8c8c8c;
			}
		}

		.info {
			margin-top: 24rpx;
			padding: 20rpx 34rpx;
			border-radius: 16rpx;
			margin-bottom: 50rpx;

			.info-title {
				font-size: 28rpx;
				color: #111111;
				margin-bottom: 24rpx;
			}
			.remarks {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: #111111;
			}
			.product-item-gift {
					margin: 10rpx 0;
					padding: 20rpx;
					background: rgba(225, 225, 225, 0.7);
					border-radius: 20rpx;
				}
			.product-item {
				margin-bottom: 20rpx;

				.product-item-image {
					width: 128rpx;
					height: 128rpx;
				}

				.product-item-con {
					margin-left: 16rpx;
					flex: 1;

					.product-item-name {
						width: 460rpx;
						font-size: 28rpx;
						color: #111111;
					}

					.product-item-suk {
						font-size: 24rpx;
						color: #999999;
						margin-bottom: 10rpx;
					}

					.product-item-num {
						font-size: 24rpx;
						color: #999999;
					}

					.product-item-price {
						font-size: 28rpx;
						color: $uni-color-theme;
					}
				}
			}

			.product-total {
				margin-bottom: 20rpx;
				font-size: 24rpx;

				text {
					color: $uni-color-theme;
				}
			}

			.info-item {
				margin-top: 40rpx;

				.info-item-label {
					font-size: 26rpx;
					color: #666666;
				}

				.info-item-value {
					font-size: 26rpx;
					color: #111111;
					margin-left: 30rpx;
					word-wrap: break-word;
					word-break: break-all;
				}
			}

		}
	}

	.transferred {
		width: 690rpx;
		color: #666;
		background-color: #d1d1d1;
		border-radius: 30rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 26;
	}
	.strategy_pop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		z-index: 99999;

		.pop_box {
			margin: 50rpx 50rpx 0 50rpx;
			display: flex;
			justify-content: space-between;
		}

		.button_pop {
			margin-top: 50rpx;
			line-height: 80rpx;
			text-align: center;
			width: 40%;
			color: rgb(255, 255, 255);
			overflow: visible;
			color: #666;
			background-color: #d1d1d1;
			border-radius: 100rpx;
		}

		.image {
			border-radius: 16rpx;
			padding: 100rpx 34rpx 30rpx 34rpx;

			.image-title {
				font-size: 32rpx;
				color: #111111;
				font-weight: bold;
			}

			.image-tips {
				margin-top: 16rpx;
				margin-bottom: 30rpx;
				font-size: 24rpx;
				color: #999999;
			}
			.image-inp {
				margin-top: 30rpx;
				border: 1px solid #111111;
				padding: 10rpx;
			}
		}
	}
	
	.delivery-item-operate {
				margin: -30rpx;
				background: #FFF;
				padding: 30rpx 0 10rpx 0;
				display: flex;
				align-items: center;
    			justify-content: center;
				/deep/ .con {
					padding: 0 30rpx 20rpx 30rpx !important;
				}
				.delivery-item-remark {
					font-size: 28rpx;
					color: #666666;
					margin-right: 20rpx;
					word-wrap: break-word;
					word-break: break-all;
				}

				.transferred_order {
					width: 170rpx;
					color: #666;
					background-color: #d1d1d1;
					border-radius: 30rpx;
					line-height: 56rpx;
					text-align: center;
					margin-right: 30rpx;
					font-size: 26;
					height: 56rpx;
				}
			}
			.popup-service {

.popup-service-title {
	font-size: 36rpx;
	border-bottom: 20rpx solid #F6F6F6;
	text-align: center;
	padding: 34rpx 0;
}

.popup-search-title {
	padding: 34rpx 30rpx;
}

.popup-service-list {
	padding: 30rpx;
	height: 60vh;

	.popup-service-list-title {
		font-size: 24rpx;
		color: #111111;
		// text-align: center;
		margin-bottom: 36rpx;

	}

	.popup-service-item {
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		background: #F6F6F6;
		padding: 26rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.popup-service-image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 5rpx;
		}

		.popup-service-name {
			font-size: 28rpx;
			color: #111111;

			&.flex-cc {
				display: flex;
				flex-direction: column;
			}

			.flex-cc-t {
				line-height: 62rpx;
				font-size: 32rpx;
			}

			.flex-cc-b {
				color: #666666;
			}
		}

		.popup-service-describe {
			color: #fff;
			margin-top: 10rpx;
			background-color: #BB0024;
			padding: 10rpx 30rpx;
			border-radius: 30rpx;
		}

		.popup-service-rest {
			color: #4b4b4b;
			background-color: #8f8e8e;
		}
	}
}


}
.strategy_pop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		z-index: 99999;

		.pop_box {
			margin: 50rpx 50rpx 0 50rpx;
			display: flex;
			justify-content: space-between;
		}

		.button_pop {
			margin-top: 50rpx;
			line-height: 80rpx;
			text-align: center;
			width: 40%;
			color: rgb(255, 255, 255);
			overflow: visible;
			color: #666;
			border-radius: 100rpx;
		}

		.image {
			border-radius: 16rpx;
			padding: 100rpx 34rpx 30rpx 34rpx;

			.image-title {
				font-size: 32rpx;
				color: #111111;
				font-weight: bold;
			}

			.image-tips {
				margin-top: 16rpx;
				margin-bottom: 30rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
}
</style>
